<template>
  <view>
    <headers></headers>

    <!-- radio -->
    <view class="video">
      <image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>

      <view class="chakan">
        <image src="../../static/imgs/Slice 98.png" mode=""></image>
        <text>1234</text>
      </view>
    </view>

    <!--  -->
    <view class="content">
      <view class="title">
        <view class="title_top">长清大学生红叶谷汉服真人秀</view>
        <view class="text">非常满意的一次旅行，行程后面两天自主报了几个项目，玩的非常爽。也非常舒服，岛上的风景非常美。</view>
        <view style="color: #666666;font-size: 24rpx;">发布时间：2023-3-12</view>
      </view>

      <!-- 评论 -->
      <view class="review">
        <view class="review_num">共25条评论</view>
        <view class="review_item" v-for="item in 2">
          <!-- 一级 -->
          <view class="one">
            <view class="img">
              <image src="../../static/imgs/Rectangle 548.png" mode=""></image>
            </view>
            <view class="user">
              <view class="name">小可爱</view>
              <view class="review_content">氛围感慢慢</view>
              <view class="time">2023-3-21</view>
            </view>
          </view>
          <!-- 二级 -->
          <view class="two" v-for="item in 2">
            <view class="img">
              <image src="../../static/imgs/Rectangle 548.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
            </view>
            <view class="user">
              <view class="name">小可爱</view>
              <view class="review_content">氛围感慢慢</view>
              <view class="time">2023-3-21</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 留言 -->
      <view class="message">
        <u-search search-icon='edit-pen' placeholder="留下你的想法" v-model="keyword" action-text=' '></u-search>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        type: 'text',
        border: true,
        keyword: '' // 留下你的想法
      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  .video {
    position: relative;
    width: 756rpx;
    height: 421rpx;

    >image {
      width: 100%;
      height: 100%;

    }


    .chakan {
      position: absolute;
      bottom: 18rpx;
      right: 24rpx;
      color: #FFFFFF;
      font-size: 24rpx;
      font-weight: 500;

      >image {
        margin-right: 7rpx;
        vertical-align: yop;
        width: 32rpx;
        height: 20rpx;
      }
    }
  }

  // 
  .content {
    // margin-top: 32rpx;

    .title {
      padding: 32rpx 32rpx 20rpx;
      border-bottom: 2rpx solid #EDEDED;

      .title_top {
        margin-bottom: 15rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
      }

      .text {
        margin-bottom: 17rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #333333;
      }
    }

    .review {
      .review_num {
        margin: 32rpx 32rpx 0;

        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }

      .review_item {
        padding: 32rpx;
        border-bottom: 2rpx solid #EDEDED;

        .one,
        .two {
          display: flex;

          .img {
            width: 80rpx;
            height: 80rpx;
            margin-right: 16rpx;

            >image {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
            }
          }

          .user {
            .name {
              font-size: 24rpx;
              font-weight: 400;
              color: #4B4B4B;
            }

            .review_content {
              margin: 12rpx 0 20rpx;
              font-size: 28rpx;
              font-weight: 400;
              color: #252525;
            }

            .time {
              font-size: 23rpx;
              font-weight: 400;
              color: #C0C0C0;
            }
          }

        }

        .two {
          margin-left: 64rpx;
          margin-top: 32rpx;
        }
      }
    }
  }

  // 留言
  .message {
    border-top: 1rpx solid #EDEDED;
    margin-top: 450rpx;
    padding: 16rpx 32rpx 84rpx;

    text-align: center;

  }

  ::v-deep .u-search {
    width: 686rpx;
    height: 64rpx;
    background: #F6F6F6;
    border-radius: 62rpx 62rpx 62rpx 62rpx;
  }
</style>